<template>
    <ul class="cate-all">
      <router-link
      tag="li"
          v-for="item of category "
          :key="item.id"
          :to="/detail/ + Number(item.url.split('=')[1])"
      >
            <img  class="cate-foot-img" :src="item.imageUrl" />
            <span class="cate-foot-title" > {{item.title}}</span>
      </router-link>
    </ul>
</template>
<script>
export default {
    props:['list'],
  
       
    data(){
        return{
            category:[]
        }
    },
    beforeRouteUpdate (to, from, next){
         console.log(to.params.list)
        this.$http.get(`http://www.xiongmaoyouxuan.com/api/tab/${to.params.list}?start=0`)
            .then(resp=>{
              this.category = resp.data.data.categories
            })
           // console.log(this.urlId)
        
        next()
    },
    methods: {
    //   getid(url){
    //     this.$router.history.push(`/detail/${Number(url.split("=")[1])}`)

    //   }
    },
  created(){
     
        this.$http.get(`http://www.xiongmaoyouxuan.com/api/tab/2?start=0`)
            .then(resp=>{
              this.category = resp.data.data.categories
           this.urlId = resp.data.data.categories.map(item=>{

                  this.urlId=item.url.split("=")[1]
                 console.log(this.urlId)
                    return  this.urlId
              })
           
            })
    }
}
</script>

<style lang="scss" scoped>
   .cate-all{
       height: 100%;
       width: 100%;
       overflow: hidden;
       display: flex;
       flex-flow: wrap;
        align-items: center;
        justify-content: space-around;
        li{
            width: 103px;
            height:94px;
         
            display: flex;
            flex-direction: column;
            text-align: center;
           
        }
   }
    .cate-foot-img{
                height: 60px;
                width: 60px;
                margin: auto;
              
            }
             .cate-foot-title{
                 font-size:18px;
                 color: black;
               
             }
</style>
